<html>
<head>
</head>

<body>
<div style="height: 500px;"><!--figure--></div>
<br>
<table border=0>
<tr>
 <td>Source diameter (arcminutes):</td>
 <td>
  <input id="slider_diameter" type="range" min="1" max="60" value="32" />
 </td>
 <td><p id="selected_diameter">32</p></td>
</tr>
<script>
 var slider_diam = document.getElementById("slider_diameter");
 var selected_diam = document.getElementById("selected_diameter");
 var canvas = document.getElementById("canvas_0");
 var button_menu = document.getElementById("button_menu_0");
 // Remove canvas border and button menu for a sparse look
 canvas.style.border = "none";
 button_menu.style.display = "none";
 // Update slider value and send user event to Python side to update plot
 function plot(){
  selected_diam.innerHTML = slider_diam.value;
  handle_user_event(slider_diam.value,0);
 }
 // Update plot as the slider moves
 slider_diam.addEventListener("input", plot, false);
</script>
</table>
</body>
